<template>
<el-container>
  <el-header>
    <el-row>
      <el-col :span="8">
        <span @click="$router.push('/home/welcome')" class="title">个人博客系统后台</span>
      </el-col>
      <el-col :span="8" :offset="8" class="info">
        <el-dropdown trigger="click">
          <div class="el-dropdown-link">
            <div class="avatar">
              <img v-if="loginInfo.avatar?.startsWith('http')" :src="loginInfo.avatar" alt="">
              <img v-else :src="avatarSrc" alt="头像加载失败">
            </div>
            <span>{{ loginInfo.nickname }}<i class="el-icon-arrow-down el-icon--right"></i></span>
          </div>
          <el-dropdown-menu>
            <el-dropdown-item @click.native="detail" v-if="loginInfo.roleId === 2 && loginInfo.userinfoStatus === 3" icon="el-icon-wallet">认证完成</el-dropdown-item>
            <el-dropdown-item @click.native="auth" v-if="loginInfo.roleId === 2 && loginInfo.userinfoStatus !== 3" icon="el-icon-headset">实名认证</el-dropdown-item>
            <el-dropdown-item @click.native="info" :divided="loginInfo.roleId === 2" icon="el-icon-user">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="password" icon="el-icon-lock">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logout" divided icon="el-icon-switch-button">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-header>
  <el-container>
    <el-aside>
      <el-menu
        router
        style="border: none"
        :default-active="$route.path"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="blog">
          <template slot="title">
            <i class="el-icon-notebook-2"></i>
            <span>博客模块</span>
          </template>
          <el-menu-item-group title="博客管理">
            <el-menu-item index="/home/vip/apply">博客发布</el-menu-item>
            <el-menu-item index="/home/vip/blog">博客列表</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="类型管理">
            <el-menu-item index="/home/vip/category">博客分类</el-menu-item>
            <el-menu-item index="/home/vip/tag">博客标签</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu v-if="loginInfo.roleId === 1" index="user">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>用户模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/userinfo">用户管理</el-menu-item>
            <el-menu-item index="/home/vip">会员管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu v-if="loginInfo.roleId === 1" index="system">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统数据</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/home/blog">全部博客</el-menu-item>
            <el-menu-item index="/home/category">全部分类</el-menu-item>
            <el-menu-item index="/home/tag">全部标签</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
  <userinfo-password ref="userinfoPassword"/>
  <vip-auth ref="vipAuth"/>
  <vip-detail ref="vipDetail"/>
  <userinfo-edit v-if="loginInfo.roleId === 1" ref="editRef" @close="getLoginInfo"/>
  <vip-edit v-else ref="editRef" @close="getLoginInfo"/>

</el-container>
</template>

<script>
import UserinfoPassword from '@/views/admin/userinfo/UserinfoPassword.vue'
import UserinfoEdit from '@/views/admin/userinfo/UserinfoEdit.vue'
import VipEdit from '@/views/admin/vip/VipEdit.vue'
import VipAuth from '@/views/admin/vip/VipAuth.vue'
import VipDetail from '@/views/admin/vip/VipDetail.vue'

export default {
  name: 'HomeView',
  components: { VipDetail, VipAuth, VipEdit, UserinfoEdit, UserinfoPassword },
  data () {
    return {
      loginInfo: {

      },
      avatarSrc: ''
    }
  },
  methods: {
    getLoginInfo () {
      this.$axios.get('info').then(data => {
        this.loginInfo = { ...data }
        this.avatarSrc = process.env.VUE_APP_BASE_PATH + data.avatar
        sessionStorage.setItem('loginId', this.loginInfo.userinfoId)
      }).catch(e => e)
    },
    logout () {
      this.$confirm('确定注销登录吗？', { type: 'info', title: '询问' }).then(() => {
        this.$axios.post('logout').then(() => {
          this.$cookies.remove('token')
          sessionStorage.removeItem('loginId')
          this.$router.replace('/login')
        })
      }).catch(e => e)
    },
    password () {
      this.$refs.userinfoPassword.init()
    },
    info () {
      this.$refs.editRef.init(this.loginInfo.userinfoId)
    },
    auth () {
      this.$refs.vipAuth.init(this.loginInfo.userinfoId)
    },
    detail () {
      this.$refs.vipDetail.init(this.loginInfo.userinfoId)
    }
  },
  created () {
    this.getLoginInfo()
  }
}
</script>

<style scoped lang="scss">
.el-container{
  height: 100vh;
  .el-header{
    background-color: #545c64;
    color: white;
    .el-row{
      height: 100%;
      &>.el-col{
        height: 100%;
        display: flex;
        align-items: center;
      }
      .title{
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
      }
      .info{
        justify-content: right;
        .el-dropdown{
          margin-right: 20px;
          .el-dropdown-link{
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            .avatar{
              height: 50px;
              width: 50px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 10px;
              img{
                display: block;
                height: 100%;
                width: 100%;
              }
            }
          }
        }
      }

    }
  }
  .el-aside{
    background-color: #545c64;
  }
}
</style>
